:root {
    --gray-light: #1b1d23;
    --gray-dark: #131519;
    --gray-darkest: #0d0f11;
    --brand-coal: #0f0d0e;
    --brand-charcoal: #231f20;
    --brand-charcoal-muted: #1b1918;
    --brand-gray: #262522;
    --brand-yellow: #fcba28;
    --brand-pink: #f38ba3;
    --brand-green: #0ba95b;
    --brand-purple: #7b5ea7;
    --brand-beige: #f9f4da;
    --brand-blue: #12b5e5;
    --brand-orange: #fc7428;
    --brand-red: #ed203d;
    --brand-white: #fff;
    --red: var(--brand-red);
    --white: var(--brand-beige);
    --purple: var(--brand-purple);
    --black: var(--brand-coal);
    --blue: var(--brand-blue);
    --pink: var(--brand-pink);
    --gold: var(--brand-yellow);
    --aqua: var(-- brand-blue);
    --gray: var(--brand-gray);
    --yellow: var(--brand-yellow);
    --green: var(--brand-green);
    --orange: var(--brand-orange);
    --charcoal: var(--brand-charcoal);
    --coal: var(--brand-coal);
}


/* Responsive */

@media screen and (max-width:768px) {
    nav {
        margin-top: 90px;
        position: fixed;
    }
    .cont-1 {
        display: flex;
        flex-direction: column-reverse;
        height: auto;
    }
    .sect-4 header {
        font-size: 1.9rem;
    }
    .sect-4 {
        width: 700px;
        height: 900px;
        position: absolute;
        margin: 50rem 0 0 3rem;
    }
    .sect-4 .in-cont {
        margin: 30px 0 0 50px;
        width: 600px;
        height: 700px;
        flex-direction: row;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        background-color: #262522;
    }
    .sect-4 .in-cont .in-content {
        width: max-content;
        height: 700px;
    }
    .sect-4 .in-cont .in-content .li-cont ul li {
        font-size: 1.3rem;
    }
    .sect-4 .in-cont .in-pic {
        display: none;
    }
    /* footer {
        height: 800px;
        position: absolute;
        margin-top: 124rem;
        flex-wrap: wrap;
        gap: 5px;
    }
    footer .avatar img {
        height: 310px;
    } */
}


/* smartphones */

@media screen and (max-width:425px) and (max-width: 767px) {
    header {
        margin: 50px;
        max-width: 425px;
        justify-content: center;
    }
    nav {
        margin: 0;
        right: 4rem;
        height: 60px;
        width: max-content;
        position: fixed;
        display: flex;
        justify-content: center;
    }
    nav ul li {
        padding: 1rem;
    }
    nav ul li a {
        font-size: 15px;
    }
    section {
        width: 100%;
    }
    .cont-1 {
        width: 500px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        align-items: center;
        margin: 40px 0px 0px 30px;
    }
    .text-box-1 {
        margin: -90px 0 0 -20px;
    }
    .cont-2 {
        display: flex;
        flex-direction: column;
    }
    .img-box-1 img {
        height: 400px;
    }
    .sect-3 {
        display: block;
        width: 500px;
        margin: 0.5rem 0 0 1rem;
        height: 1200px;
    }
    .sect-3 h3 {
        font-size: 1.5rem;
    }
    .flex-cont {
        display: grid;
    }
    .card {
        border: 1px solid #fff;
        height: 180px;
        width: 150px;
    }
    .card .ico img {
        height: 50px;
    }
    .card-text p {
        font-size: 1rem;
    }
    .star img {
        height: 10px;
    }
    p.desc {
        font-size: 0.8rem;
    }
    p.exp {
        font-size: 1rem;
    }
    .gify {
        margin: 50px 0 0 10px;
        display: flex;
        gap: 90px;
        display: flex;
        justify-content: center;
        align-content: space-between;
        margin-bottom: -180px;
        right: -9rem;
    }
    .gify img {
        height: 40px;
    }
    .sect-4 header {
        font-size: 1.9rem;
    }
    .sect-4 {
        margin-top: 18rem;
        width: 500px;
        height: 900px;
        position: absolute;
        left: -1rem;
    }
    .sect-4 .in-cont {
        margin: 10px 0 0 30px;
        width: 450px;
        height: 700px;
        flex-direction: row;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        background-color: #262522;
    }
    .sect-4 .in-cont .in-content {
        width: 500px;
        height: 700px;
    }
    .sect-4 .in-cont .in-pic {
        display: none;
    }
    /* footer {
        margin: 0;
        width: 510px;
        height: 450px;
        margin-top: 80rem;
    }
    footer .avatar {
        display: none;
    }
    footer .gif {
        display: none;
    }
    footer .navigate header {
        font-size: 1.9rem;
    }
    footer .navigate ul li {
        font-size: 14px;
    }
    footer .other header {
        font-size: 1.9rem;
    }
    footer .other ul li {
        font-size: 14px;
    }
    footer .other {
        margin-left: -10rem;
    }
    .devinfo {
        position: absolute;
    } */
}


/* Floating */

@keyframes float {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-20px);
    }
    100% {
        transform: translatey(0px);
    }
}


/* scroll bar */

::-webkit-scrollbar {
    display: block;
    width: 8px;
    overflow: auto;
    height: 1em;
}

::-webkit-scrollbar-thumb {
    background: var(--brand-yellow);
    border-radius: 20px;
    height: 3rem;
}

::-webkit-scrollbar-track {
    background-color: var(--brand-coal);
}

::-webkit-scrollbar-button {
    display: block;
    background-color: var(--brand-charcoal);
    height: 4px;
}

::-webkit-scrollbar-corner {
    background-color: #7f1d1d;
}